<!--
 * @Author: miteng 973203639@qq.com
 * @Date: 2023-12-21 09:19:21
 * @LastEditors: miteng 973203639@qq.com
 * @LastEditTime: 2024-07-30 15:15:37
 * @Description: 
 * Copyright (c) 2024-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
-->
<template>
  <el-tooltip :content="isFullscreen ? '取消全屏' : '全屏'" effect="dark" placement="bottom">
    <div class="cursor-pointer w-[40px] h-[50px] leading-[50px] text-center">
      <div style="font-size: 20px" class="cursor-pointer w-[40px] h-[50px] leading-[50px] text-center" @click='toggle'>
        <FullScreen style="width: 1em; height: 1em; " />
      </div>
    </div>
  </el-tooltip>
</template>

<script setup lang="ts">
import { useFullscreen } from '@vueuse/core';

const { isFullscreen, toggle } = useFullscreen();
</script>
